selection

This is a header: select some text.

This is a paragraph: select some text.

code:

            <style>
                .one{margin-left:1vw;}
                ::selection {color: red; background: yellow;}
            </style>
            <div>
                <h3 class="one">This is a header: select some text.</h3>
                <p class="one">This is a paragraph: select some text.</p>
                <div class="one">This is some text in a div element: select some text.</div>
            </div>
        

This text has special styles when you highlight it.

Also try selecting text in this paragraph.

code:

            <style>
                .two, .three{margin-left: 1vw;}
                .two::selection {color: gold; background-color: red;}
                .three::selection {color: white; background-color: blue;}
            </style>
            <div>
                <h3 class="two">This text has special styles when you highlight it.</h3>
                <p class="three">Also try selecting text in this paragraph.</p>
            </div>
        

Select me to see normal behavior.

Try selecting me for a different text color.

You can select me for a different background color.

You can also select me for a different background.

Guess what… you can select me for a different background color and text color.

How about a text-shadow? Sure, select me for a different text-shadow.

What about nest elements? Select me for a different background color. And this sentence is just a color selection. Nesting works!

Textarea, too!*

code:

            <style>
                .example-color::selection {color: #8e44ad;}
                .example-background-color::selection {background-color: #f1c40f;}
                .example-background::selection {background: #e74c3c;}
                .example-both::selection {background-color: #8e44ad;  color: white;}
                .example-shadow::selection {text-shadow: 1px 1px 0 #27ae60;}
                .example-input::selection {background: #2ecc71;}
                .example-textarea::selection {background: #34495e; color: white;}
                p,input,textarea  {margin-bottom: 1vw;}
            </style>
            <div style="margin-left: 1vw;">
                <p class="example-normal">Select me to see normal behavior.</p>
                <p class='example-color'>Try selecting me for a different text color.</p>
                <p class='example-background-color'>You can select me for a different background color.</p>
                <p class='example-background'>You can also select me for a different background.</p>
                <p class='example-both'>Guess what& hellip; you can select me for a different background color and text color.</p>
                <p class='example-shadow'>How about a text-shadow? Sure, select me for a different text-shadow.</p>
                <p class='example-background-color'>What about nest elements? Select me for a different background color.
                <span class='example-color'>And this sentence is just a color selection.
                </span> Nesting works!</p>
                <input class='example-input' type='text' value='Inputs work!*'>
                <textarea class='example-textarea' cols='30' name='' rows='10'>Textarea, too!*</textarea>
                <div class='foot-notes'>*not Safari</div>
            </div>
        

On selection, this text-shadow stays on.

On selection, this text-shadow is set to none.

code:

            <style>
                .four {margin-left: 5vw;font-size: 2vw; font-weight: 900; margin-bottom: 1vw; 
                    text-shadow: 0.1vw 0.2vw 0.1vw #C79292;}
                .four::selection {background: lightblue;}
                .example::selection {text-shadow: none;}
            </style>
            <div>
                <p class="four">On selection, this text-shadow stays on.</p>
                <p class="four example">On selection, this text-shadow is set to none.</p>
            </div>